$(function (){
    //导航栏下拉出现下载App

    $(".app").mouseenter(function () {
        $(".sanJiao").show();
        $(this).children(".downApp").stop(true,false).slideDown(600);
    }).mouseleave(function () {
        $(this).children(".downApp").stop(true,false).slideUp(600);
        $(".sanJiao").hide();
    });

    // 购物车
    $(".topbar-info").mouseenter(function () {
        $(this).css("background-color","white")
        $(".navmain>.topbar-info>a>em>img").attr("src","./images/stophiCON.png");
        $(".topbar-info>a").css("color","#FF6A00");
        $(this).children(".shopCar").stop(true,false).slideDown();
    }).mouseleave(function () {
        $(".topbar-info>a").css("color","#b0b0b0");
        $(".navmain>.topbar-info>a>em>img").attr("src","./images/cart1.png");
        $(this).css("background-color","#424242");
        $(this).children(".shopCar").stop(true,false).slideUp();
    });

    // 商品列表数据 使用数组存放
    var listItemTitle = new Array("小米手机","Redmi红米","电视","笔记本","家电","路由器","智能家电");
    // var listItemImg = new Array("./images/RedmiImg1.webp","RedmiImg2.webp","RedmiImg3.webp","RedmiImg4.webp","RedmiImg5.webp")
    var listItemImg = new Array();
    listItemImg[0] = new Array("listImg2.webp","listImg3.webp","listImg4.webp","listImg5.webp","listImg6.webp");
    listItemImg[1] = new Array("RedmiImg1.webp","RedmiImg2.webp","RedmiImg3.webp","RedmiImg4.webp","RedmiImg5.webp");
    listItemImg[2] = new Array("tv1.webp","tv2.webp","tv3.webp","tv4.webp","tv5.webp");
    listItemImg[3] = new Array("comP1.webp","comP2.webp","comP3.webp","comP4.webp","comP5.webp");
    listItemImg[4] = new Array("jdlist1.webp","jdlist2.webp","jdlist3.png","jdlist4.webp","jdlist5.webp");
    listItemImg[5] = new Array("lyq1.webp","lyq2.webp","lyq3.webp","lyq4.jpg","lyq5.jpg");
    // listItemImg[6] = new Array("jdlist1.webp","jdlist2.webp","jdlist3.png","jdlist4.webp","jdlist5.webp");

    var listItemName = new Array();
    listItemName[0] = new Array("小米MIX FOLG","小米11 UItra","小米11 Pro","小米11 青春版","小米11");
    listItemName[1] = new Array("Redmi Note 10 Pro","Redmi Note 10 5G","k40 游戏增强版","k40 Pro系列","Redmi K40");
    listItemName[2] = new Array("小米电视6 至尊版 55英寸","小米电视 ES55 2022款","小米电视大师 22 英寸","小米透明电视","小米电视大师 65英寸");
    listItemName[3] = new Array("小米笔记本 Pro X 15","Redmibook Pro 14 蛟龙版","Redmibook Pro 15 蛟龙版","小米笔记本 pro 15 蛟龙版","小米笔记本 pro 15");
    listItemName[4] = new Array("米家分冷对开门冰箱 483L","米家扫拖机器人 1T","米家互联网洗烘一体机 10Kg","小米净水器 S1 800G","米家空气净化器");
    listItemName[5] = new Array("小米路由器AX600","小米路由器AX900","Redmi路由器AC2100","小米路由器Mesh","小米路由器4A 千兆版");
    // listItemName[6] = new Array("米家分冷对开门冰箱 483L","米家扫拖机器人 1T","米家互联网洗烘一体机 10Kg","小米净水器 S1 800G","米家空气净化器");

    var prices = new Array();
    prices[0] = new Array("9999","5499","4499","2099","3799");
    prices[1] = new Array("1599","1099","1999","2499","899");
    prices[2] = new Array("5999","3499","11999","49999","19999");
    prices[3] = new Array("8499","4299","4999","6799","6499");
    prices[4] = new Array("2399","1799","1799","1699","799");
    prices[5] = new Array("599","1299","169","999","109");
    // prices[6] = new Array("2399","1799","1799","1699","799");

    var strImgLocal;
    var strListNameItem;
    var strPriceItem;
    $(".navMainList>ul>li").mouseenter(function () {
        var index = $(this).index() - 1;

        if(index < 6){
            for (var i = 0;i < 6;i ++){
                strImgLocal = "./images/" + listItemImg[index][i];
                strListNameItem = listItemName[index][i];
                strPriceItem = prices[index][i] + "元起";
                console.log(strImgLocal);
                $('.shop2hide>ul>li').eq(i).children('a').children('img').attr('src',strImgLocal);
                $('.shop2hide>ul>li').eq(i).children('div').children('span').eq(0).text(strListNameItem);
                $('.shop2hide>ul>li').eq(i).children('div').children('span').eq(1).text(strPriceItem);
            }

            $(".shop2hide").stop(true,false).slideDown();
        }else {
            console.log(2323);
            $(".shop2hide").stop(true,false).slideUp();
        }

    });
    $(".navMainList").mouseleave(function () {
        $(".shop2hide").stop(true,false).slideUp();
    });

    // 搜索框（显示你的搜索历史）
        //点击搜索按钮，显示下拉框
    $(".search").click(function () {
        $(".input2").css('border-top','1px solid red')
        $(".input2").css('border-bottom','1px solid red')
        $(".input2").css('border-right','1px solid red')
        $(".hostItem").stop(true,false).slideDown();
        return false;
    })
        //点击其他地方，隐藏下拉框
    $(document).click(function () {
        $(".input2").css('border-top','1px solid #e0e0e0')
        $(".input2").css('border-bottom','1px solid #e0e0e0')
        $(".input2").css('border-right','1px solid #e0e0e0')
        $(".hostItem").stop(true,false).slideUp();
    })

       // 点击搜索按钮，将搜索的内容加到下拉历史记录中
    var hostArrList = new Array();
    $("#searchsubmit").click(function () {
        //首先获取到文本框输入的内容；
        var value = $("#searchtext").val();
        // 创建一个li标签
        var boo = 0;
        for (var i = 0;i < hostArrList.length;i++){
            if(hostArrList[i] === value){
                boo++;
            }
        }
        console.log(boo)
        if(boo===0){
            hostArrList.push(value);
            $(".hostItem>ul").append("<li>" + value + "</li>");
        }
    })



    //***************************侧边导航栏******************
    // 测试数据
    var arrColors = ['#111','#222','#333','#fff'];

    // ********************真实数据*************************
    //     名称
    var listPhoneName = new Array();
    listPhoneName[0] = ['小米10 MIX','小米11 Pro','小米11 青春','小米 10S','小米11','小米10','黑鲨4 Pro','黑鲨4','Redmi 至尊纪念版','小米云服务','Redmi K30','Note10 Pro',
        'Note10 5G','K40','K40 Pro','Redmi K40','Redmi 8A','Redmi Note9 Pro']
    listPhoneName[1] = ['小米11 MIX','小米11 Pro','小米11 青春','小米 10S','小米11','小米10','黑鲨4 Pro','黑鲨4','Redmi 至尊纪念版','小米云服务','Redmi K30','Note10 Pro',
        'Note10 5G']
    listPhoneName[2] = ['小米 MIX','小米11 Pro','小米11 青春','小米 10S','小米11','小米10','黑鲨4 Pro','黑鲨4','Redmi 至尊纪念版','小米云服务','Redmi K30','Note10 Pro',
        'Note10 5G','K40','K40 Pro','Redmi K40','Redmi 8A','Redmi Note9 Pro']
    listPhoneName[3] = ['小米 MIX','小米11 Pro','小米11 青春','小米 10S','小米11','小米10','黑鲨4 Pro','黑鲨4'];


    var listTvName=new Array();
    listTvName[1]=['','','','','','','','','','','','','','','','','',''];

    // ***************************图片地址***************************
    var listPhoneImg = new Array();
    listPhoneImg[0]=["1.png","2.png","3.png","4.jpg","5.png","6.png","7.png","8.png",
                     "9.png","10.png","11.png","12.jpg","13.png","14.png","15.png","16.png","17.png","1.png"];
    listPhoneImg[1]=["9.png","2.png","3.png","4.jpg","5.png","6.png","7.png","8.png",
        "9.png","10.png","11.png","12.jpg","13.png"];
    listPhoneImg[2]=["14.png","2.png","3.png","4.jpg","5.png","6.png","7.png","8.png"];

    var listTvImg=new Array();
    listTvImg[1]=[];

    var col = listPhoneName[0].length/6;
    console.log(listPhoneName[0].length)
    // *************************通过创建的ul给listItem，每一个ul的大小是190px********************
    var ListItemWideth = col * 213;
    // ***********************设置listItem的大小*******************
    console.log(ListItemWideth)
    $(".listItem").css("width",ListItemWideth + "px");
    //根据数据的长度，创建ul
    for (var j = 0;j < col;j ++){
        var $ul = $('<ul></ul>');
        $('.listItem').append($ul);
    }

    for (var i = 0;i < listPhoneName[0].length;i ++){
        var strImg = "./imgLists/" +listPhoneImg[0][i];
        var $li = $("<li><a><img src="+ strImg +"><span>"+listPhoneName[0][i] +"</span></a></li>");
        var kk = Math.floor(i / 6);
        $(".listItem").children("ul").eq(kk).append($li);
    }
    //***********根据创建的ul 与每列只能有6个li来   创建li标签，并且将数据写入到li标签中***********



    $(".listheadernav>ul>li").mouseenter(function () {
        var index = $(this).index();

        $(".listItem").show();

    })
    $(".listheadernav>ul>li") .mouseleave(function () {
        $(".listItem").hide();
    })

})